<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<style>
		.mui-content>.mui-table-view:first-child {
			margin-top: 0;
			
		}
		
		.mui-slider {
			margin-top: 44px;
			height: 9rem;
		}
		
		.mui-slider img {
			height: 9rem;
		}
		
		.mui-bar-nav~.mui-content {
			padding-top: 0px;
		}
		
		.mui-content {
			background: white;
		}
		
		.mui-grid-view.mui-grid-9 {
			margin: 0;
			padding: 0;
			border-top: 1px solid #eee;
			border-left: 1px solid #eee;
			background-color: white;
		}
		
		.mui-grid-view.mui-grid-9 .mui-table-view-cell {
			margin: 0;
			padding: 0px 15px;
			vertical-align: top;
			border-right: none;
			border-bottom: none;
		}
		
		.nav-photo {
			width: 2rem;
			height: 2rem;
		}
		
		.nav-photo img {
			width: 1.5rem;
			height: 1.5rem;
		}
		
		.pro-content {
			background: white;
		}
		
		.pro-content ul {
			overflow: hidden;
			padding: 0;
		}
		
		.pro-content ul li {
			padding: 2%;
			float: left;
			width: 50%;
			list-style: none;
			box-shadow: 0 0 0 1px #eee inset;
		}
		
		.pro-content ul li img {
			max-width: 100%;
			height: 8.5rem;
		}
		
		.pro-img {
			text-align: center;
		}
		
		.pro-detail {
			line-height: 1rem;
			height: 2rem;
			margin: 0;
			padding: 0;
		}
		
		.pro-price {
			height: 1.5rem;
			line-height: 1.5rem;
			margin: 0;
			padding: 0;
		}
		
		.pro-price span {
			margin-right: 0.25rem;
			color: red;
		}
		
		.mui-bar-tab {
			bottom: 0;
			display: table;
			width: 100%;
			height: 50px;
			padding: 0;
			table-layout: fixed;
			border-top: 0;
			border-bottom: 0;
			-webkit-touch-callout: none;
		}
		
		.tab img {
			width: 1.2rem;
			height: 1.2rem;
			vertical-align: sub
		}
		
		nav {
			height: 2.5rem;
			line-height: 2.5rem;
			background: white;
			position: fixed;
			width: 100%;
			bottom: 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			border-top: 1px solid #ddd;
		}
		
		nav a {
			width: 33.3%;
			text-align: center;
			color: #222;
		}
		
		.mui-toast-container {
			text-align: center;
			line-height: 17px;
			position: fixed;
			width: 6rem;
			height: 4rem;
			z-index: 9999;
			top: 50%;
			left: 50%;
			-webkit-transition: opacity .3s;
			transition: opacity .3s;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
			opacity: 0;
		}
		
		.mui-toast-container.mui-active {
			opacity: .9;
		}
		
		.mui-toast-message {
			font-size: 14px;
			padding: 10px 25px;
			text-align: center;
			color: #fff;
			border-radius: 6px;
			background-color: #323232;
		}
		.erro{width: 2rem;
		display: block;
		text-align: center;
		margin: 0 auto;
		margin-bottom: .5rem;
		height: 2rem;}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">小柒商城</h1>
		</header>
		<div class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#"><img src="img/banner4.jpg"></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="img/banner1.jpg"></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="img/banner2.jpg"></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="img/banner3.jpg"></a>
				</div>
				<div class="mui-slider-item">
					<a href="#"><img src="img/banner4.jpg"></a>
				</div>
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#"><img src="img/banner1.jpg"></a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>

		<div class="mui-content">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="coupon.html">
						<span class="nav-photo"><img src="img/shi.png"></span>
						<div class="mui-media-body">实物</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 jianshe">
					<a href="javascript:;">
						<span class="nav-photo"><img src="img/quan.png"></span>
						<div class="mui-media-body">卡券</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 choujiang">
					<a href="javascript:;">
						<span class="nav-photo"><img src="img/chou.png"></span>
						<div class="mui-media-body">抽奖</div>
					</a>
				</li>

			</ul>
		</div>

		<div class="pro-content">

			<ul>
				<li>
					<a href="prodail.html">
						<div class="pro-img">
							<img src="img/book1.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="prodail.html">
						<div class="pro-img">
							<img src="img/book2.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="prodail.html">
						<div class="pro-img">
							<img src="img/cup.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/book4.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/book5.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/cup2.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/book6.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/book7.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/book8.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/book9.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div class="pro-img">
							<img src="img/book10.jpg">
						</div>
						<div class="pro-text">
							<p class="pro-detail mui-ellipsis-2">机械手册，电子版机械手册，电子版机械手册，电</p>
							<p class="pro-price"><span>107.00</span>柒币</p>
						</div>
					</a>
				</li>
			
			</ul>
		</div>
		<div style="width: 100%;height: 50px;"></div>

		<nav>
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="tab"><img src="img/mall-index.png"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="" href="history.html">
				<span class="tab"><img src="img/exchange.png"></span>
				<span class="mui-tab-label">兑换记录</span>
			</a>
			<a href="add.html">
				<span class="tab"><img src="img/mall-index.png"></span>
				<span class="mui-tab-label">我的地址</span>
			</a>

		</nav>

	</body>
	<!-- <script src="js/mui.previewimage.js"></script>
	<script type="text/javascript" src="js/mui.zoom.js" ></script> -->
	<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
	<script type="text/javascript">
		//获得slider插件对象
		
		mui.previewImage();
	
		var gallery = mui('.mui-slider');
		gallery.slider({
			interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
		});
		
//
//		var toast = document.createElement('div');
//		toast.classList.add('mui-toast-container');
//		toast.innerHTML = '<div class="' + 'mui-toast-message' + '">'+'<span class="mui-icon mui-icon-closeempty"></span>' + message + '</div>';
//		toast.addEventListener('webkitTransitionEnd', function() {
//			if(!toast.classList.contains(CLASS_ACTIVE)) {
//				toast.parentNode.removeChild(toast);
//				toast = null;
//			}
//		});

		(function($, window) {
	var CLASS_ACTIVE = 'mui-active';
	/**
	 * 自动消失提示框
	 */
	$.toast = function(message,options) {
		var durations = {
		    'long': 3500,
		    'short': 2000
		};

		//计算显示时间
		 options = $.extend({
	        duration: 'short'
	    }, options || {});


		if ($.os.plus && options.type !== 'div') {
			//默认显示在底部；
			$.plusReady(function() {
				plus.nativeUI.toast(message, {
					verticalAlign: 'bottom',
					duration:options.duration
				});
			});
		} else {
			if (typeof options.duration === 'number') {
		        duration = options.duration>0 ? options.duration:durations['short'];
		    } else {
		        duration = durations[options.duration];
		    }
		    if (!duration) {
		        duration = durations['short'];
		    }
			var toast = document.createElement('div');
			toast.classList.add('mui-toast-container');
			toast.innerHTML = '<div class="' + 'mui-toast-message' + '">'+'<img class="erro" src="img/erro.png">' + message + '</div>';
			toast.addEventListener('webkitTransitionEnd', function() {
				if (!toast.classList.contains(CLASS_ACTIVE)) {
					toast.parentNode.removeChild(toast);
					toast = null;
				}
			});
			//点击则自动消失
			toast.addEventListener('click', function() {
		        toast.parentNode.removeChild(toast);
		        toast = null;
		    });
			document.body.appendChild(toast);
			toast.offsetHeight;
			toast.classList.add(CLASS_ACTIVE);
			setTimeout(function() {
				toast && toast.classList.remove(CLASS_ACTIVE);
			}, duration);
		}
	};

})(mui, window);



		$(function() {
			$('.jianshe').click(function() {
				//alert('ok');
				mui.toast('此板块正在建设中', {
					duration: 'long',
					type: 'div'
				})
			})

			$('.choujiang').click(function() {
				mui.toast('此板块正在建设中', {
					duration: 'long',
					type: 'div'
				})
			})
		})
	</script>

</html>